<template>
  <div>
    <div class="title">
      <img :src="shop.logo" alt="" />
      <span>{{ shop.name }}</span>
    </div>
    <div class="zong">
      <div class="data">
        <!-- <span>{{ shop.cSells }}</span> -->
        <span>{{ sell }}</span>
        <p>总销量</p>
      </div>
      <div class="all">
        <span>{{ shop.cGoods }}</span>
        <p>全部宝贝</p>
      </div>
      <table>
        <tr v-for="item in shop.score" :key="item">
          <td>
            {{ item.name }}
          </td>
          <td class="col" :class="{ 'score-better': item.isBetter }">
            {{ item.score }}
          </td>
          <td :class="{ 'better-more': item.isBetter }" class="bgc">
            <span>{{ item.isBetter ? "高" : "低" }}</span>
          </td>
        </tr>
      </table>
    </div>
  </div>
</template>
<script>
export default {
  name: "DetailShopInfo",
  props: {
    shop: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  computed: {
    sell(value) {
      value = this.shop.cSells;
      let result = value;
      if (value > 10000) {
        result = (result / 10000).toFixed(1) + "万";
      }
      return result;
    },
  },
  // filters: {
  //   sellCountFilter(value) {
  //     let result = value;
  //     if (value > 10000) {
  //       result = (result / 10000).toFixed(1) + "万";
  //     }
  //     return result;
  //   },
  // },
};
</script>
<style scoped>
.title {
  padding-left: 5px;
  margin-top: 15px;
  font-size: 13px;
}
.title img {
  width: 30px;
  vertical-align: middle;
  margin-right: 8px;
}
.bgc {
  line-height: 8px;
}
.bgc span {
  background-color: rgb(240, 99, 99);
}
.col {
  color: red;
}
.score-better {
  color: green;
}
.better-more span {
  background-color: rgb(164, 226, 164);
}
.zong {
  margin-top: 20px;
  display: flex;
}
.all,
.data,
table {
  flex: 1;
  text-align: center;
  float: left;
  font-size: 12px;
}
table {
  margin-right: 8px;
}
table td {
  padding-bottom: 5px;
}
table td:last-child {
  display: inline-block;
  height: 8px;
}
.all span,
.data span {
  display: inline-block;
  padding-bottom: 5px;
  font-size: 16px;
  font-weight: 700;
  margin-top: 6px;
}
</style>